<template>
  <div id="mountNode"></div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import G6 from "@antv/g6";
import axios from "axios";

@Component({
  components: {},
})
export default class HomeView extends Vue {
  topoData: any = [];
  mounted() {
    axios.get("/topo.json", {}).then((response) => {
      console.log("获取到的json数据", response);
      this.topoData = response.data;
      this.handleInitTopo();
    });
  }

  handleInitTopo() {
    console.log("init");
    const container = document.getElementById("mountNode");
    const width = container?.scrollWidth;
    const height = container?.scrollHeight || 500;
    const graph = new G6.TreeGraph({
      container: "mountNode", // 创建的容器 id 或容器本身
      width, // Number，图的宽度
      height, // Number，图的高度
    });
    graph.data(this.topoData); // 读取数据源到图上
    graph.render(); // 渲染图
    graph.fitView();
    graph.on("node:click", (e: any) => {
      console.log(e, "node节点数据=");
      if (e.target.get("name") === "collapse-icon") {
        e.item.getModel().collapsed = !e.item.getModel().collapsed;
        graph.setItemState(e.item, "collapsed", e.item.getModel().collapsed);
        graph.layout();
      }
    });

    if (typeof window !== "undefined") {
      window.onresize = () => {
        if (!graph || graph.get("destroyed")) return;
        if (!container || !container.scrollWidth || !container.scrollHeight)
          return;
        graph.changeSize(container.scrollWidth, container.scrollHeight);
      };
    }
  }
}
</script>

<style scoped>
#home {
  width: 100%;
  height: 100%;
}
</style>
